<template>
  <div class="user" v-if="user">
    <div class="flex">
      <img v-if="showAvatar" class="avatar" :src="user.avatar" height="20"
           width="20"/>
      <el-popover
        placement="bottom"
        width="200"
        @show="show()"
        trigger="hover">

        <el-skeleton v-if="!initialize" :rows="6" animated/>
        <div class="info" v-else>
          <el-row>
            <el-col :span="8">
              <el-avatar :src="user.avatar" :size="50">
                <img class="avatar" src="~/static/img/defaultAvatar.png"/>
              </el-avatar>
            </el-col>
            <el-col :span="16">
              <div class="flex">
                <div class="left username">
                  <nuxt-link :to="{name:'profile-posts',params:{id:user.id,page:1}}" v-text="user.name"></nuxt-link>
                </div>
                <img class="right" v-if="user.verify" src="~/static/img/verify.png" height="18" width="18"
                     :title="user.verifyDesc"
                     style="cursor: pointer"/>
              </div>
              <el-alert v-if="user.verify" style="margin-bottom:10px;padding: 0px;" type="success" :closable="false">
                <span>认证：</span>
                <span v-text="user.verifyDesc"></span>
              </el-alert>
            </el-col>
          </el-row>

          <el-row class="items">
            <el-col :span="8">
              <div class="title">帖子</div>
              <nuxt-link  class="number" :to="{name:'profile-posts',params:{id:user.id,page:1}}" v-text="info.topics">10</nuxt-link>
            </el-col>
            <el-col :span="8">
              <div>
                <div class="title">回答</div>
                <nuxt-link  class="number" :to="{name:'profile-comments',params:{id:user.id,page:1}}" v-text="info.comments">10
                </nuxt-link>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="title">点赞</div>
              <div class="number" v-text="info.likes">10</div>
            </el-col>
          </el-row>
          <div class="ask-to text-center">
            <el-button type="primary" size="mini" @click="$router.push({name:'ask-to',params:{userId:user.id}})">向TA提问</el-button>
          </div>
        </div>

        <nuxt-link class="name" slot="reference" :to="{name:'profile-posts',params:{id:user.id,page:1}}"
                   v-text="user.name"></nuxt-link>
      </el-popover>

      <img v-if="user.isStaff" src="~/static/img/staff.png" height="15" width="15" title="管理员" style="cursor: pointer;margin-right: 10px;"/>
      <img v-if="user.verify" src="~/static/img/verify.png" height="15" width="15" title="社区认证用户"
           style="cursor: pointer"/>


    </div>
  </div>
  <div class="user" v-else>用户信息为null</div>
</template>

<script>
import api from "@/utils/api";

export default {
  name: "UserInfo",
  props: {
    user: {
      type: Object,
      default: null
    },
    showAvatar: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      initialize: false,
      info: null
    }
  },
  methods: {
    show() {

      if (this.initialize) {
        return;
      }

      //获取详情
      let self = this;
      api.getUserDetail(this.user.id).then(res => {
        self.info = res;
        self.initialize = true;
      });
    }
  }
}
</script>

<style scoped lang="less">
.info {
  padding-left: 10px;
  text-align: left;
  display: block;
}

.username {
  height: 20px;
  overflow: hidden;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
}
.items{
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid var(--border-color);
  text-align: center;
}
.user {
  display: inline-block;
  margin-left: 10px;
  margin-right: 10px;


  .layer-avatar {
    flex: 0 0 100px !important;
  }


  .avatar {
    border-radius: 15px;
    margin-right: 10px;

  }

  .name {
    color: var(--post-color);
    margin-right: 5px;

    &:hover {
      color: var(--primary);
    }
  }
}
.ask-to{
  margin-top: 10px;
}
</style>
